import React, { Fragment } from 'react'
import {
  View,
  StyleSheet,
  
  Text,
  ScrollView
} from 'react-native'
import { ScaleS, ScaleT } from 'src/utils/ScreenUtil'
import BasePage from 'src/pageP/base/base-page/index'
import CustomButton from 'src/components/button/CustomButton'
import { ONE_PIXEL } from '@/utils/ScreenUtil'

/* redux */
class BusinessIndustry extends BasePage {
  state = {
    header: {
      headerBg: 'transparent'
    },
    itemIndex: -9,
    list: ['互联网', '销售推广', '教育培训', '财会金融', '广告设计', '人力资源', '法律咨询', '医疗医学', '文化影视', '其他岗位']
  }

  onClick = ({ itemIndex }) => {
    this.setState({
      itemIndex: itemIndex
    })
  }

  Preservation = () => {
    const { list, itemIndex } = this.state
    this.props.navigation.state.params.getData({ companyAbout: list[itemIndex] }, { companyAbout: list[itemIndex] })
  }

  childRender () {
    const { itemIndex, list } = this.state
    return (
      <View style={styles.container}>
        <Text style={styles.businessIndustry}>企业行业</Text>
        <Text style={styles.headerText}>*选择您的公司所在行业，单选</Text>
        <View style={styles.bodyView}>
          {
            (list || []).map((item, index) => {
              return <CustomButton onPress={this.onClick} params={{ itemIndex: index }} style={[styles.bodyViewItem, itemIndex == index ? { borderColor: '#FFC200FF' } : {}]} key={index}>
                <Text style={[styles.bodyViewItemText, itemIndex === index ? { color: '#FFC200FF' } : {}]}>{item}</Text>
              </CustomButton>
            })
          }
        </View>
        <CustomButton style={styles.preservationButton} onPress={this.Preservation}>
          <Text style={styles.preservationText}>保存</Text>
        </CustomButton>
      </View>
    )
  }

  renderNavigationBarChild = () => {
    return (
      <CustomButton style={[styles.naviBtnBG]} onPress={this.Preservation}>
        <Text>保存</Text>
      </CustomButton>
    )
  }

  componentDidMount () {
    const { companyAbout } = this.props.navigation.state.params
    let itemIndex = 0
    const { list } = this.state
    list.map((item, index) => {
      if (item === companyAbout) {
        itemIndex = index
      }
    })
    this.setState({
      itemIndex: itemIndex
    })
  }

  jumpFn = () => {
    this.props.navigation.navigate('BMineCompany')
  }
}

export default BusinessIndustry

const styles = StyleSheet.create({
  container: {
    height: '100%',
    flex: 1,
    marginLeft: ScaleS(20),
    marginRight: ScaleS(20),
    backgroundColor: '#FFFFFF'
  },
  businessIndustry: {
    marginTop: ScaleS(84),

    fontSize: ScaleT(27)
  },
  headerText: {
    marginTop: ScaleS(18),
    fontSize: ScaleT(14),
    color: '#999999FF'
  },
  bodyView: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    flexWrap: 'wrap',
    marginTop: ScaleS(59)
  },
  preservationButton: {
    position: 'absolute',
    bottom: ScaleS(20),
    backgroundColor: '#000',
    height: ScaleS(50),
    borderRadius: ScaleS(5),
    justifyContent: 'center',
    alignItems: 'center',
    width: '100%'
  },
  preservationText: {
    color: '#fff'
  },
  bodyViewItem: {
    width: ScaleS(94),
    height: ScaleS(42),
    borderColor: '#CCCCCCFF',
    borderStyle: 'solid',
    borderRadius: ScaleS(5),
    borderWidth: ONE_PIXEL,
    justifyContent: 'center',
    alignItems: 'center',
    marginBottom: ScaleS(20)
  },
  naviBtnBG: {
    width: ScaleS(58),
    height: ScaleS(28),
    justifyContent: 'center',
    alignItems: 'center',
    marginRight: ScaleS(20),
    borderRadius: ScaleS(14),
    borderWidth: ONE_PIXEL,
    borderStyle: 'solid',
    borderColor: '#000000',
    fontSize: ScaleT(12),
    fontWeight: '600',
    color: '#000000',
    alignSelf: 'flex-end'
  }
})
